<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:thSys="">
<head>
    <meta charset="UTF-8">
    <title>所有附件</title>
    <link rel="stylesheet" type="text/css"
          href="/plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="/plugins/vali/css/main.css">
    <link rel="stylesheet" type="text/css"
          href="/plugins/font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet"
          href="/plugins/bootstrap-fileinput/css/fileinput.min.css">
    <link rel="stylesheet" type="text/css"
          href="/plugins/toast/jquery.toast.css">
</head>
<body>
<style type="text/css" rel="stylesheet">
    .div-thumbnail {
        transition: all .5s ease-in-out;
        padding: 10px;
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        display: table-cell;
    }

    .img-thumbnail:hover {
        border: solid #009688;
    }

    .thumbnail {
        margin-bottom: 0;
    }
</style>
<div class="col-md-12">
    <div class="row">
        <ul class="nav nav-tabs" role="tablist">
            <li class="nav-item"><a class="nav-link active"
                                    href="#allAttachment" role="tab" data-toggle="tab">所有附件</a></li>
            <li class="nav-item"><a class="nav-link"
                                    href="#uploadAttachment" role="tab" data-toggle="tab">上传附件</a></li>
        </ul>
    </div>
    <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="allAttachment">
            <div class="row">
                <input type="hidden" id="showId" th:value="${id}">
                <th:block th:each="attachment : ${info.list}">
                    <div class="col-lg-2 col-md-3 col-sm-6 col-6 div-thumbnail"
                         th:onclick="choice([[${attachment.picturePath}]])">
                        <a href="#"><img
                                class="img-thumbnail img-fluid img-responsive"
                                th:src="${attachment.pictureSmallPath}"></a>
                    </div>
                </th:block>
            </div>
            <div th:replace="admin/module/macros :: pageAdminNav(${info})"></div>
        </div>
        <div role="tabpanel" class="tab-pane" id="uploadAttachment">
            <div class="tile">
                <div class="file-loading">
                    <input id="input-fas" autocomplete="off" name="file" type="file"
                           class="file-loading" multiple>
                </div>
            </div>
        </div>
    </div>
</div>
<div th:replace="admin/module/macros :: comm"></div>
<div th:replace="admin/module/macros :: bootstrapFileinput"></div>
<script type="text/javascript">
    $("#input-fas").fileinput(
        {
            theme: "fa",
            uploadUrl: "/admin/attachment/upload",
            language: 'zh',
            uploadAsync: true,
            maxFileCount: 10,
            allowedFileExtensions: ['jpg', 'gif', 'png', 'jpeg',
                'svg', 'psd'],
            enctype: 'multipart/form-data',
            showClose: false
        }).on("filebatchuploadcomplete", function (event, files, extra) {
        $.toast({
            text: "上传成功！",
            heading: '提示',
            icon: 'success',
            showHideTransition: 'fade',
            allowToastClose: true,
            hideAfter: 1000,
            stack: 1,
            position: 'top-center',
            textAlign: 'left',
            loader: true,
            loaderBg: '#ffffff',
            afterHidden: function () {
                window.location.reload();
            }
        });
    });

    function choice(path) {
        var id = $("#showId").val();
        $("#" + id + "", window.parent.document).attr("value", path);
        parent.layer.closeAll();
    }
</script>
</body>
</html>